<template>
  <div class="earlyWarning">
    <div class="admin">
      <el-tabs v-model="tabIndex" @tab-click="handleClick">
        <el-tab-pane name="待核实">
          <span slot="label">我的待办</span>
        </el-tab-pane>
        <el-tab-pane name="完成">
          <span slot="label">我的已办</span>
        </el-tab-pane>
        <el-tab-pane name>
          <span slot="label">我的全部</span>
        </el-tab-pane>
      </el-tabs>
      <div class="box">
        <div class="bottomGroup" v-if="userType==3">
          <el-button
            size="mini"
            :type="busType===item?'primary':'default'"
            @click="tabChange(item)"
            v-for="(item,index) in tabOptions "
            :key="index"
          >{{item}}</el-button>
        </div>

        <div class="table">
          <el-table height="100%" :data="tableData" size="mini" v-loading="tableLoading">
            <el-table-column label="抓拍照片" prop="beforeFileUrl" align="center">
              <template slot-scope="scope">
                <img
                  v-if="scope.row.beforeFileUrl"
                  :src="scope.row.beforeFileUrl"
                  width="40"
                  height="40"
                />
                <p v-else>无图片</p>
              </template>
            </el-table-column>
            <el-table-column label="预警时间" prop="warnTime" align="center"></el-table-column>
            <el-table-column label="处理时间" prop="dealTime" align="center" v-if="tag1"></el-table-column>
            <el-table-column label="店面" prop="orgName" align="center"></el-table-column>
            <el-table-column label="预警点" prop="warnName" align="center" :formatter="forStatus"></el-table-column>
            <el-table-column label="是否整改" prop="warnState" align="center" :formatter="formatStatus"></el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <span v-if="userType==3">
                  <el-button
                    size="mini"
                    @click="Dispose(scope.row)"
                  >{{scope.row.warnState == 0 ? '处理':'查看'}}</el-button>
                </span>
                <span v-if="userType==5">
                  <el-button
                    size="mini"
                    @click="Dispose(scope.row)"
                  >{{scope.row.warnState == 2 ? '查看':'处理'}}</el-button>
                </span>
                <span v-if="userType==6">
                  <el-button
                    size="mini"
                    @click="Dispose(scope.row)"
                  >{{scope.row.warnState == 2 ? '查看':'处理'}}</el-button>
                </span>
                <span v-if="userType==4">
                  <el-button
                    size="mini"
                    @click="Dispose(scope.row)"
                  >{{scope.row.warnState == 2 ? '查看':'处理'}}</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="paging">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentPageChange"
            :page-sizes="[1, 10, 15, 20]"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWarningData } from "@/api/smartShops.js";
/*根据账号角色信息来展现视图  if account is admin*/
export default {
  name: "Index",
  data() {
    return {
      tag1: false,
      tabIndex: "待核实",
      total: 0,
      pageSize: 10,
      tableData: [],
      currentPage: 1,
      busType: "",
      userInfo: {},
      tableLoading: false,
      userType: "",
      pageTabName: [],
      pageTabName2: 1,
      isTrue: "",
      tabOptions: ["全部", "工装", "陈列"]
    };
  },
  methods: {
    Dispose(row) {
      let { warnUuid, busType } = row;
      if (this.userType === "3") {
        busType == 0
          ? this.$router.push({
              path: "/warZoneFrockDetail",
              query: { warnUuid: warnUuid }
            })
          : this.$router.push({
              path: "/warZoneDeskDetail",
              query: { warnUuid: warnUuid }
            });
      } else {
        this.$router.push({
          path: "/shopManagerDetail",
          query: { warnUuid: warnUuid, busType: busType }
        });
      }
    },
    /*标签切换*/
    handleClick({ name }) {
      if (name == "待核实") {
        this.tag1 = false;
        if (this.userType === "3") {
          this.pageTabName = [0];
          this.pageTabName2 = 0;
        } else {
          this.pageTabName2 = 1;
          this.pageTabName = [1]
        }
      } else if (name == "完成") {
        this.tag1 = true;
        if (this.userType === "3") {
          this.pageTabName = [1, 2];
          this.pageTabName2 = 1;
        } else {
          this.pageTabName2 = 1;
          this.pageTabName = [2]
        }
      } else {
        this.tag1 = true;
        this.pageTabName2 = "";
        this.pageTabName = [];
      }
      this.busType="";
      this.getData();
    },
    sizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    currentPageChange(current) {
      this.currentPage = current;
      this.getData();
    },
    async getData() {
      this.tableLoading=true;
      let { records, total, footer} = await getWarningData({
        size: this.pageSize,
        current: this.currentPage,
        condition: {
          dealUuid: this.userInfo.userId,
          busType: this.busType,
          warnStateList: this.pageTabName,
          dealState: this.pageTabName2,
          isTrue: this.isTrue
        }
      });
      this.tableLoading = false;
      this.tableData = records;
      this.total = total;
      this.userType = !!footer && !!footer.userType ? footer.userType : '';
      this.isTrue = "";
    },
    tabChange(tab) {
      this.currentPage = 1;
      if (tab == "工装") {
        this.busType = 0;
      }
      if (tab == "陈列") {
        this.busType = 1;
      }
      if (tab == "全部") {
        this.busType = "";
      }
      this.isTrue = "";
      this.getData();
    },
    formatStatus(row) {
      let status = "";
      if (row.warnState == 0) {
        status = "待核实";
      }
      if (row.warnState == 1) {
        status = "待整改";
      }
      if (row.warnState == 2) {
        status = "已整改";
      }
      return status;
    },
    forStatus(row) {
      let warnStatus = row.warnName;
      if (warnStatus == "0") {
        return "工装";
      } else if (warnStatus == "1") {
        return "陈列";
      }
    }
  },
  mounted() {},
  created() {
    this.userType =
      JSON.parse(localStorage.getItem("logininfo")).orgList[0].userType || "";
      if(this.userType == 3){
        this.pageTabName = [0];
        this.pageTabName2 = 0;
      }else{
        this.pageTabName =[1];
        this.pageTabName2 = 1 ;
      }
    this.userInfo = { ...JSON.parse(localStorage.getItem("logininfo")) };
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.earlyWarning {
  width: 100%;
  height: 100%;

  .admin {
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .box {
      height: calc(100% - 55px);
      width: 100%;
      .bottomGroup {
        width: 100%;
      }

      .table {
        height: calc(100% - 100px);
        padding: 10px;
        .el-table {
          background-color: transparent;
        }
      }

      .paging {
        height: 50px;
        width: 100%;
      }
    }

    .circle_num {
      margin: 0 2px;
      font-size: 13px;
      color: red;
    }
  }
}
</style>

<!--待办   待核实      已办   完成-->
